import React, { useState } from 'react'
import dynamic from 'next/dynamic' // 引入懒加载组件
// import moment from 'moment'
const Jspang = dynamic(import('../components/Jspang'))
import '../static/test.css'
import { Button } from 'antd'

/**
 *  懒加载 : 可以是第三方组件， 也可以是自定义组件
 *  
 *  不在直接 import 导入库， 在该使用到的地方在引入
 */
function Time () {

    const [time, setTime] = useState(Date.now())

    // 正常模式修改
    // const changeTime = () => {
    //     setTime(moment(Date.now()).format('YYYY-MM-DD HH:ss:mm'))
    // }

    // 懒加载模式修改
    const changeTime = async () => {
        const moment = await import('moment')
        setTime(moment.default(Date.now()).format('YYYY-MM-DD HH:ss:mm'))
    }

    return (
        <>
            <div>当前时间： {time}</div> <br/>
            <Jspang>异步加载组件</Jspang><br/>
            <button onClick={changeTime}>改变时间格式</button>
            <Button onClick={changeTime}>改变时间格式</Button>
        </>
    )
}

export default Time